<template>
  <div class="mengli-upload">
    <div class="upload-wrap">
      <el-upload
        ref="elUpload"
        :multiple="false"
        :show-file-list="false"
        :http-request="uploadFileMethod"
        :before-upload="beforeUpload"
        :disabled="uploadPercent > 0"
        :on-progress="uploadProcess"
        :on-error="handleError"
        accept="image/*,.zip,.rar"
        action
        class="file-uploader"
      >
        <!-- <el-button :loading="loading" type="text" size="small" class="btn-operate btn-import" >
        上传文件
      </el-button> -->
        <div :class="{'unUpload': uploadPercent > 0}" class="upload-btn">
          <span>上传文件</span>
          <img :src="iconUpload">
          <div v-loading="uploadPercent > 0" v-if="uploadPercent > 0" class="loadding" element-loading-spinner="el-icon-loading" />
        </div>
      </el-upload>
      <span class="tip">支持扩展名：jpg.png...</span>
    </div>
    <div v-if="uploadPercent > 0" class="mengli-progress">
      <div class="upload-info-box">
        <i class="info-icon el-icon-paperclip" />
        <span>{{ fileName }}</span>
        <i class="info-icon el-icon-close" @click="cancelHttp" />
      </div>
      <el-progress :percentage="uploadPercent" :show-text="false"/>
    </div>
  </div>
</template>
<script>
import ImportList from '@/mixins/importList';
import ImportIcon from '@/assets/medium/import.png';
import iconUpload from '@/assets/icon-upload-blue.png';
export default {
  name: 'ImportButton',
  mixins: [ImportList],
  props: {
    // 按钮文字
    btnText: {
      type: String,
      default: '导入excel'
    },
    // 控制是否显示成功和失败提示框
    hideConfirm: {
      type: Boolean,
      default: false
    },
    // 是否可以点击
    isDisabled: {
      type: Boolean,
      default: false
    },
    importApi: {
      type: String,
      default: () => {
        return '';
      }
    },
    getList: { // 导入后列表刷新的方法
      type: Function,
      default: null
    }
  },
  data() {
    return {
      ImportIcon,
      iconUpload,
      isSealing: false,
      limitNum: false,
      progressShow: false,
      percentage: 0
    };
  },
  methods: {
    uploadProcess(event, file) {
      this.progressShow = true;
      this.percentage = Number(file.percentage.toFixed(0));
    },
    uploadFileProcess(event, file, fileList) {
      this.fileArr = fileList;
      this.fileArr.forEach(item => {
        if (item.percentage !== 100) {
          item.progressFlag = true;
          item.progressPercent = Math.abs(item.percentage.toFixed(0));
        }
      });
    },
    handleError(respone) {
      this.progressFlag = false;
      this.$message({
        message: '上传失败',
        type: 'warning'
      });
    },
    cancelUpload() {
      this.cancelHttp('取消上传');
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
@import './common.scss';
.upload-btn {
  .loadding {
    margin-left: 2px;
  }
  .el-loading-spinner {
    margin-top: -16px;
  }
  &.unUpload {
    cursor: not-allowed;
  }
}
.upload-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  .tip {
    margin-left: 16px;
    font-size: 14px;
    color: #999999;
  }
}
.import-button {
  padding-top: 4px;
  .btn-import {
    position: relative;
    .progress-text {
      display: inline-block;
      height: 22px;
      position: absolute;
      left: -36px;
      top: 4px;
    }
    // .el-icon-loading {
    //   position: absolute;
    //   top: 9px;
    //   left: -12px;
    // }
    img {
      width: 19px;
      height: 18px;
    }
  }
}
.medium-import-btn-container {
  padding-top: 0;
  .file-uploader {
    margin: 0;
  }
}
.medium-import-btn {
  font-size: 12px;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  height: 30px;
  background-color: #ffffff;
  border-radius: 50px 50px 50px 50px;
  border: solid 1px #e5e5e5;
  margin-left: 10px;
  font-weight: normal;
  cursor: pointer;
  &.hover:hover {
    color: #6e8fa2;
    border-color: #e5e5e5;
    background-color: #ffffff;
  }
  img {
    width: 13px;
    height: 12px;
    margin-right: 5px;
  }
}
.imprt-tooltip {
  padding: 5px 10px;
}
.mengli-progress {
  width: 500px;
  .upload-info-box {
    display: flex;
    align-items: center;
    color: #999999;
    font-size: 14px;
    margin-bottom: 13px;
    span {
      margin-left: 8px;
      flex: 1;
    }
    .info-icon {
      font-size: 16px;
    }
    .el-icon-close {
      cursor: pointer;
    }
  }
}
</style>
